<template>
  <view :class="'page-container-income ' + extraClass ">

    <ul>
      <li class="body-item" v-for="item in list" @click="(e)=>selectItem(item)">
        <svg-icon v-if="!item.choose" :width="28" :height="28" :box-height="50" :box-width="50" :icon="item.title" background="#eee"  />
        <svg-icon v-else :width="28" :height="28" :box-height="50" :box-width="50" :icon="item.title" background="pink" fill-color="hotpink" />
        <span class="body-item-title">
            {{item.title}}
          </span>
      </li>

      <li class="body-item" >
        <svg-icon :width="28" :height="28" :box-height="50" :box-width="50" icon="设置" background="#eee"/>
        <span class="body-item-title">
            设置
          </span>
      </li>
    </ul>

    <accounting-button-group  class="accounting-button-group-box"  v-if="show" @choose-account="chooseAccount" />



  </view>
</template>

<script>
import SvgIcon from "@/pages/svg-icon.vue";
import AccountingButtonGroup from "@/pages/bookkeeping/accounting-button-group.vue";
import AccountChooser from "@/pages/bookkeeping/account-chooser.vue";

export default {
  components: {AccountChooser, AccountingButtonGroup, SvgIcon},
  data() {
    return {
      show:false,

      extraClass:'background-animation-income-none',
      list:[
        {title:'餐饮',choose:false,id:1},
        {title:'购物',choose:false,id:2},
        {title:'日用',choose:false,id:3},
        {title:'交通',choose:false,id:4},

        {title:'蔬菜',choose:false,id:5},
        {title:'水果',choose:false,id:6},
        {title:'零食',choose:false,id:7},
        {title:'运动',choose:false,id:8},

        {title:'娱乐',choose:false,id:9},
        {title:'通讯',choose:false,id:10},
        {title:'服饰',choose:false,id:11},
        {title:'美容',choose:false,id:12},

        {title:'住房',choose:false,id:13},
        {title:'居家',choose:false,id:14},
        {title:'孩子',choose:false,id:15},
        {title:'长辈',choose:false,id:16},


        {title:'社交',choose:false,id:17},
        {title:'旅行',choose:false,id:18},
        {title:'数码',choose:false,id:19},
        {title:'医疗',choose:false,id:20},
        {title:'书籍',choose:false,id:21},
        {title:'学习',choose:false,id:22},
        {title:'礼金',choose:false,id:23},
        {title:'礼物',choose:false,id:24},
        {title:'办公',choose:false,id:25},
        {title:'维修',choose:false,id:26},
        {title:'捐赠',choose:false,id:27},
        {title:'亲友',choose:false,id:28},
        {title:'快递',choose:false,id:29},
        {title:'会员',choose:false,id:30},
        {title:'保险',choose:false,id:31},
        {title:'税务',choose:false,id:32},
        // {title:'设置'},

      ],
    }
  },
  props: {},
  methods: {

    selectItem(item){
      let idx = -1
      for (let i = 0; i < this.list.length; i++) {
        if(this.list[i] === item){
          idx = i
          this.list[i].choose=true
          if(this.list[i].choose){
            this.show = true
            //顺便更新到选中的标签里
            let newItem  = {...item}
            this.$store.dispatch("CHOOSE_TYPE",newItem ).then(res=>{
              console.log("then",this.$store.state.type.chooseType)
            });
          }

        }else{
          this.list[i].choose=false

        }
      }
    },
    chooseAccount() {
      this.$emit('choose-account')
    },
    enterPage(){
      this.extraClass = 'background-animation-income-enter'
    },
    leavePage(){

      this.extraClass = 'background-animation-income-leave'
    },
  },
  onLoad(event) {

  }
}
</script>
<style scoped>
ul{
  border:  0;
  padding: 0;
  background: white;
  height: calc(100% -  301px);
  overflow-y: scroll;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1;
  //background: red;
}
.body-item{
  height: 100px;
  flex-basis: 25%;
  //background: red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.body-item-title{
}


.page-container-income{
  position: absolute;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
}
.background-animation-income-none{
  left: 0vw !important;
}
.background-animation-income-enter{

  animation-name: hd-enter1;
  animation-duration: 300ms;
}
.background-animation-income-leave{

  animation-name: hd-leave1;
  animation-duration: 300ms;
  left: -100vw;
  //left: 0;

}

@keyframes hd-enter1 {
  0% {
    left: -100vw;
  }
  100% {
    left: 0;
  }
}
@keyframes hd-leave1 {
  0% {
    left: 0;
  }
  100% {
    left: -100vw;
  }
}

.accounting-button-group-box{
  //position: fixed;
  bottom: 0;
  width: 100vw;
  height: 301px;

}

</style>